<template>
  <div class="wrap">
    <div class="mine_wrap">
      <div class="head">
        <span>我的</span>
        <router-link to="/setting">
           <img src="../images/mainOne/mine/mine_setting_03.png"/>
        </router-link>

      </div>
      <div class="mine">
        <router-link to="/intoBounding">
          <img src="../images/mainOne/mine/IMG_wode_touxiang.png" />
        </router-link>
        <div class="mine_info">
          <span>
            Author
          </span>
          <br/>
          <span>
            Sweet girl
          </span>
          <div class="relation">
             <router-link class="focus" to="/focus">
                关注
            </router-link>
            <router-link class="fans" to="/fans">
                粉丝
            </router-link>


          </div>
        </div>
  </div>
  <div class="content">
    <div class="items">

        <div class="item">
          <router-link to="/message">
            <img src="../images/mainOne/mine/icon_wode_xiaoxi.png" />
            <span>消息</span>
          </router-link>
        </div>
        <div class="item">
          <img src="../images/mainOne/mine/icon_shouye_shoucang.png" />
          <router-link to="/collect">
            <span>收藏</span>
           </router-link>
        </div>
         <div class="item">
           <img src="../images/mainOne/mine/icon_shouye_qiandao.png"/>

           <router-link to="/sign">
            <span>签到</span>
           </router-link>
        </div>
    </div>
  </div>
  </div>
  <Footers/>
  </div>
</template>
<script>
import ExportShowItem from "../components/exportShowiItem.vue"
import Footers from "../components/footer"


export default {
  name: "beautyExport",
  components: {
    ExportShowItem,
    Footers
  },
  data() {
    return {
      head_nav_flag: true
    }
  }
}
</script>

<style lang='less' scoped>
@pub_main_bgcolor :#ff406f;



    .mine_wrap{
        background:@pub_main_bgcolor;
        height: 400/72rem;
        width: 100%;
        
        .head{
          height: 54/75rem;
          background: @pub_main_bgcolor;
          padding-top: 40/75rem;
          padding-bottom: 26/75rem;
          line-height: 80/75rem;
          img{

            position: absolute;
            right:50/75rem;
            top:75/75rem;
            height: 46/75rem;
            width: 46/75rem;

          }
          span{
            font-size: 36/75rem;
           display: inline-block;
            color: #FFF;
            width: 100%;
            text-align: center;

          }
        }
    }
     .mine{
            position: absolute;
            top:257/75rem;
            left: 50.3%;
            transform: translateX(-50%);
            box-shadow: 0px 10px 50px #ccc;
            border-radius: 20px;
            width: 711/75rem;
            height: 300/75rem;
            background: #fff;
            img{
                position: absolute;
                top:-24/75rem;
                left:18/75rem;
                width: 141/75rem;
                height: 141/75rem;
            }
            .mine_info{
                font-size: 40/75rem;
                margin-left: 200/75rem;
                margin-top: 26/75rem;
            }
            .focus, .fans{
                font-size: 30/75rem;
                position: absolute;
                top:200/75rem;
            }
            .focus{
                left:18%;
            }
            .fans{
                right:20%;
            }
        }

.mine_wrap {
  background: @pub_main_bgcolor;
  height: 400/72rem;
  width: 100%;
}

    .content{
        margin-top:250/75rem;
        margin-left: 2/75rem;
        .items{
            height: 138/75rem;
            width: 711/75rem;
            position: absolute;
            left: 50%;
            top:56%;
            transform: translateX(-50%);
            border-radius: 20/75rem;
            box-shadow: 0 0 15px #ccc;
            padding-bottom: 25px;
            .item{
                text-align: center;
                width: 80/75rem;
                float: left;
                font-size: 30/75rem;
                margin: 0 78/75rem;
                 margin-top: 40/75rem;
                 img{
                     margin-left:18/75rem;
                     margin-bottom: 10/75rem;
                 }
            }
        }
    }



.mine {
  position: absolute;
  top: 257/75rem;
  left: 50.3%;
  transform: translateX(-50%);
  box-shadow: 0px 1px 10px #888888;
  border-radius: 20px;
  width: 711/75rem;
  height: 300/75rem;
  img {
    position: absolute;
    top: -24/75rem;
    left: 18/75rem;
  }
  .mine_info {
    font-size: 40/75rem;
    margin-left: 200/75rem;
    margin-top: 26/75rem;
  }
  .focus,
  .fans {
    font-size: 30/75rem;
    position: absolute;
    top: 200/75rem;
  }
  .focus {
    left: 18%;
  }
  .fans {
    right: 20%;
  }
}


.content {
  margin-top: 250/75rem;
  margin-left: 2/75rem;
  .items {
    height: 138/75rem;
    width: 711/75rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);


    .item {
      text-align: center;
      width: 80/75rem;
      float: left;
      font-size: 30/75rem;

      margin: 0 78/75rem;
      margin-top: 40/75rem;
      img {
        margin-left: 18/75rem;
        margin-bottom: 10/75rem;
      }
    }
  }
}
</style>

